<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>成绩中心</title>
  <link href="css/font-awesome.min.css" rel="stylesheet" />
  <link href="css/bootstrap.min.css" rel="stylesheet" />
  <link href="css/templatemo-style.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <script src="js/vue.min.js"></script>
  <script src="js/api.js"></script>
</head>

<body>
  <div class="templatemo-flex-row">
    <div class="templatemo-sidebar">
      <div class="mobile-menu-icon">
        <i class="fa fa-bars"></i>
      </div>
      <nav class="templatemo-left-nav">
        <ul>
          <li>
            <a href="考试中心.html"><i class="fa fa-map-marker fa-fw"></i>考试中心</a>
          </li>
          <li>
            <a href="试题中心.html"><i class="fa fa-database fa-fw"></i>试题中心</a>
          </li>
          <li>
            <a class="active"><i class="fa fa-bar-chart fa-fw"></i>成绩中心</a>
          </li>
          <li>
            <a href="批改中心.html"><i class="fa fa-star" aria-hidden="true"></i>批改中心</a>
          </li>
          <li>
            <a href="个人信息.html"><i class="fa fa-user-o" aria-hidden="true"></i>个人信息</a>
          </li>
          <li>
            <a href="index.html"><i class="fa fa-eject fa-fw"></i>退出</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="templatemo-content col-1 light-gray-bg">
      <div class="templatemo-content-container">
        <div class="templatemo-flex-row flex-content-row templatemo-overflow-hidden">
          <div class="col-1 templatemo-overflow-hidden">
            <div class="templatemo-content-widget white-bg templatemo-overflow-hidden">
              <div class="templatemo-flex-row flex-content-row">
                <div id="app" class="container">
                  <div class="col-xs-3">
                    <select id="selectProfession" class="form-control" @change="changeOption">
                      <option value="-1">---请选择---</option>
                      <option v-for="item in relevanceList" :value="item.profession_no">{{ item.profession_name }}
                      </option>
                    </select>
                  </div>

                  <div class="col-xs-3">
                    <select id="selectCourse" class="form-control" @change="changeOption">
                      <option value="-1">---请选择---</option>
                      <option v-for="item in relevanceList" :value="item.course_no">{{ item.course_name }}</option>
                    </select>
                  </div>

                  <table class="table table-hover">
                    <tr class="tb_head">
                      <th>专业</th>
                      <th>课程</th>
                      <th>学号</th>
                      <th>学生姓名</th>
                      <th>单选题(得分)</th>
                      <th>多选题(得分)</th>
                      <th>主观题(得分)</th>
                      <th>总分</th>
                    </tr>

                    <tr v-for="item in specificMarkList">
                      <td>{{ item.profession_name }}</td>
                      <td>{{ item.course_name }}</td>
                      <td>{{ item.student_no }}</td>
                      <td>{{ item.student_name }}</td>
                      <td>{{ item.total1 }}(分)</td>
                      <td>{{ item.total2 }}(分)</td>
                      <td>{{ item.total3 }}(分)</td>
                      <td>{{ item.total }}(分)</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="js/成绩中心.js"></script>
</body>

</html>